
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>实验动物展示</title>

{#<link rel="stylesheet" type="text/css" href="{%  static 'css/jquery.dataTables.css' %}">#}
{#<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />#}

<!-- jQuery -->
{#<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>#}
{#<script type="text/javascript" charset="utf8" src="{% static 'js/jquery-1.10.2.min.js' %}"></script>#}
<!-- DataTables -->
{#<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/dataTables.dataTables.min.js"></script>#}
{#<script type="text/javascript" charset="utf8" src="{%  static 'js/jquery.dataTables.js' %}"></script>#}
</head>
{% include 'header.html' %}

<body>

  <!-- Navigation -->
{#  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">#}
{#    <div class="container">#}
{#      <a class="navbar-brand js-scroll-trigger" href="#page-top">logo</a>#}
{#      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">#}
{#        <span class="navbar-toggler-icon"></span>#}
{#      </button>#}
{#      <div class="collapse navbar-collapse" id="navbarResponsive">#}
{#        <ul class="navbar-nav ml-auto">#}
{#          <li class="nav-item">#}
{#            <a class="nav-link js-scroll-trigger" href="#about">About</a>#}
{#          </li>#}
{#          <li class="nav-item">#}
{#            <a class="nav-link js-scroll-trigger" href="#services">Services</a>#}
{#          </li>#}
{#          <li class="nav-item">#}
{#            <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>#}
{#          </li>#}
{#        </ul>#}
{#      </div>#}
{#    </div>#}
{#  </nav>#}
{##}
{#  <header class="bg-primary text-white">#}
{#    <div class="container text-center">#}
{#      <h1>动物资源模型管理库</h1>#}
{#      <p class="lead">Animal Resource Model Management Center </p>#}
{#    </div>#}
{#  </header>#}

  <section id="about">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2>动物列表</h2>
          <p></p>

          <ul>
            {% for animal in animals %}
            <a href="/detail/{{ animal.id }}/1/"><li> {{ animal.animal_name }} &nbsp {{ animal.animal_detail }} </li></a>
            现存量：&nbsp{{ animal.animal_num }} （只/个）
            <p></p>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </section>

{#  <table align="center" id="example" class="display" style="width: 80%">#}
{#    <thead>#}
{#    <tr>#}
{#        <th class="text-center">id</th>#}
{#        <th class="text-center">animal_name </th>#}
{#        <th class="text-center">animal_detail </th>#}
{#        <th class="text-center">animal_env </th>#}
{#        <th class="text-center">animal_facility </th>#}
{#        <th class="text-center">animal_bio </th>#}
{#        <th class="text-center">animal_supplier </th>#}
{#        <th class="text-center">animal_num </th>#}
{#    </tr>#}
{#    </thead>#}
{#</table>#}

{#  <section id="services" class="bg-light">#}
{#    <div class="container">#}
{#      <div class="row">#}
{#        <div class="col-lg-8 mx-auto">#}
{#          <h2>Services we offer</h2>#}
{#          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>#}
{#        </div>#}
{#      </div>#}
{#    </div>#}
{#  </section>#}







  <!-- Footer -->
 {% include 'footer.html' %}

{#  <!-- Bootstrap core JavaScript -->#}
{#  <script src="{%  static 'vendor/jquery/jquery.min.js' %}"></script>#}
{#  <script src="{%  static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>#}
{##}
{#  <!-- Plugin JavaScript -->#}
{#  <script src="{% static 'vendor/jquery-easing/jquery.easing.min.js'  %}"></script>#}
{##}
{#  <!-- Custom JavaScript for this theme -->#}
{#  <script src="{% static 'js/scrolling-nav.js' %} "></script>#}

</body>
{#<script type="text/javascript">#}
{#    $(document).ready(function () {#}
{#        $('#example').DataTable({#}
{#            'ajax': 'http://127.0.0.1:8000/animal/', // json的url#}
{#            'columns': [#}
{#                {'data': 'id'},#}
{#                {'data': 'animal_name'},#}
{#                {'data': 'animal_detail'},#}
{#                {'data': 'animal_env'},#}
{#                {'data': 'animal_facility'},#}
{#                {'data': 'animal_bio'},#}
{#                {'data': 'animal_supplier'},#}
{#                {'data': 'animal_num'},#}
{#            ],#}
{#            'language': {#}
{#                'url': 'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Chinese.json' // 以中文显示#}
{#            }#}
{#        })#}
{#    })#}
{#</script>#}
</html>
